<style lang="scss" scoped>
.form_wrap {
    padding: 30px;
    width: 500px;
}
</style>

<template>
    <common-page-template :hasTable="false" :hasBtns="false" :hasSearch="false">
        <div class="form_wrap">
            <el-form
                label-width="110px"
                :rules="rules"
                ref="formRef"
                :inline="false"
                :model="formData"
            >
                <el-form-item label="选择角色：" prop="rid">
                    <el-select
                        style="width: 100%"
                        v-model="formData.rid"
                        disabled
                        placeholder="请选择角色"
                    >
                        <el-option v-for="item in roleList" :label="item.rname" :value="item.id" :key="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="账户名：" prop="username">
                    <el-input
                        v-model="formData.username"
                        placeholder="请输入账户名"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="归属者：" prop="affiliationName">
                    <el-input
                        v-model="formData.affiliationName"
                        placeholder="请输入归属者"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="密码：" prop="password">
                    <el-input
                        type="password"
                        v-model="formData.password"
                        placeholder="请输入密码"
                        clearable
                        show-password
                    />
                </el-form-item>
                <el-form-item label="确认密码：" prop="rePwd">
                    <el-input
                        type="password"
                        v-model="formData.rePwd"
                        placeholder="请输入确认密码"
                        clearable
                        show-password
                    />
                </el-form-item>
                <el-form-item>
                    <el-button @click="search" type="primary">确定</el-button>
                    <el-button @click="reset">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </common-page-template>
</template>

<script setup>
import { reactive, onMounted, ref } from "vue";
import useForm from "@/hooks/useForm";
import { UserSave } from '@/apis/user.js'
import { ElMessage } from 'element-plus'
import { RoleQueryList } from '@/apis/role'
import { userStore } from '@/store/user'
import { useRouter } from 'vue-router'
const router = useRouter()
const store = userStore()
const formData = reactive({
    id: store.userInfo.id,
    rid: store.userInfo.rid,
    username: store.userInfo.username,
    affiliationName: store.userInfo.affiliationName,
    password: '',
    rePwd: '',
    state: 1
});
const roleList = ref([])
// 确定
const handleSure = async () => {
    const params = { ...formData }
    if (!formData.password) {
        delete params.password
        delete params.rePwd
    }
    await UserSave(params)
    ElMessage({
        message: '修改成功, 3秒后重置到登录页',
        type: 'success',
    })
    setTimeout(() => {
        router.replace({ path: '/login' })
    }, 3000);
};
const { formRef, search, reset, validate } = useForm(handleSure);
const validatePass = (rule, value, callback) => {
    if (!value && formData.rePwd && (value !== formData.rePwd)) {
        return callback(new Error("两次输入的密码不一致"));
    }
    if (!value) {
        callback();
    } else {
        if (formData.rePwd !== "") {
            validate('rePwd', () => null)
        }
        callback();
    }
};
const validatePass2 = (rule, value, callback) => {
    if (!value && !formData.password) {
        callback();
    } else if (value !== formData.password) {
        callback(new Error("两次输入的密码不一致"));
    } else {
        callback();
    }
};
const rules = {
    rid: [{ required: true, message: "请选择角色" }],
    username: [{ required: true, message: "请输入账户名" }],
    affiliationName: [{ required: true, message: "请选择归属者" }],
    password: [{ validator: validatePass }],
    rePwd: [{ validator: validatePass2 }],
};

onMounted(async () => {
    const list = await RoleQueryList()
    roleList.value = list
})
</script>
